<template>
  <div id="userManager">
    <div class="aspace">
      <a-space :size="20">
        <a-input
          :style="{ width: '320px' }"
          @keyup.enter="list(formData)"
          placeholder="用户名"
          v-model="formData.userName"
          allow-clear
        />
        <a-input
          :style="{ width: '320px' }"
          @keyup.enter="list(formData)"
          placeholder="角色"
          v-model="formData.userRole"
          allow-clear
        />
        <a-button type="primary" @click="list(formData)">查询</a-button>
        <a-button @click="handleReset">重置</a-button>
      </a-space>
    </div>
    <div class="atable">
      <a-table
        :columns="columns"
        :data="data"
        :pagination="{ total }"
        @page-change="handlePageChange"
      >
        <template #optional="{ record }">
          <a-button
            status="danger"
            @click="$modal.info({ title: 'Name', content: record.userName })"
            >封号
          </a-button>
        </template>
      </a-table>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from "vue";
import { UserControllerService } from "../../../generated";

const formData = reactive({
  current: 1,
  userName: "",
  userRole: "",
});
const total = ref(10);
const columns = [
  {
    title: "用户名",
    align: "center",
    dataIndex: "userName",
  },
  {
    title: "账号",
    align: "center",
    dataIndex: "userAccount",
  },
  {
    title: "用户简介",
    align: "center",
    dataIndex: "userProfile",
  },
  {
    title: "用户角色",
    align: "center",
    dataIndex: "userRole",
  },
  {
    title: "Optional",
    slotName: "optional",
  },
];
const data = reactive([]);

function list(args: any) {
  formData.current = 0;
  UserControllerService.listUserByPageUsingPost({ ...args }).then((res) => {
    data.length = 0;
    total.value = res.data.total;
    Object.assign(data, res.data.records);
  });
}

function handlePageChange(page: number) {
  formData.current = page;
  list(formData);
}

function handleReset() {
  formData.current = 1;
  formData.userName = "";
  formData.userRole = "";
  list(formData);
}

onMounted(() => {
  list(formData);
});
</script>

<style scoped>
#userManager {
  margin-left: 200px;
  margin-right: 200px;
}

.atable {
  margin-top: 20px;
}
</style>
